<?php
use yii\helpers\Url;
?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>网红</title>
    <link rel="stylesheet" type="text/css" href="/static/css/commom.css">
    <!--    <script src="/static/script/jquery-1.9.1.min.js"></script>-->
    <script type="text/javascript" src="/static/script/transform.x.js"></script>
    <script type="text/javascript" src="/static/script/zepto.min.js"></script>
    <script type="text/javascript" src="/static/script/touch.slide.js"></script>
    <script type="text/javascript" src="/static/script/commom.js"></script>
</head>
<body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxb92c2bb9c487c950', // 必填，公众号的唯一标识
        timestamp: '<?= $data['js_conf']['time']?>', // 必填，生成签名的时间戳
        nonceStr: '<?= $data['js_conf']['noncestr']?>', // 必填，生成签名的随机串
        signature: '<?= $data['js_conf']['signature']?>',// 必填，签名，见附录1
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function(){
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '万人秀贝', // 分享标题
            link: 'http://shopbox.10000dt.com/vote/vote/search', // 分享链接
            imgUrl: 'http://static.bricks.10000dt.com/picture/ohB24Dp8wPE7XQLiAMdr03k59VFmsS.jpg', // 分享图标
            success: function () {
                $.post("<?= url::to('/vote/vote/share')?>", {type:1}, function(data) {
                    if(data == 1) {
                        msgPopup('分享成功',2000);
                    }else{

                    }
                })
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
            title: '万人秀贝', // 分享标题
            desc: '万人秀贝，秀出自我', // 分享描述
            link: 'http://shopbox.10000dt.com/vote/vote/search', // 分享链接
            imgUrl: 'http://static.bricks.10000dt.com/picture/ohB24Dp8wPE7XQLiAMdr03k59VFmsS.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                $.post("<?= url::to('/vote/vote/share')?>", {type:2}, function(data) {
                    if(data == 1) {
                        msgPopup('分享成功',2000);
                    }else{

                    }
                })
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
    wx.error(function(res){

    });
</script>
<div class="page page1">
    <ul class="tp_header">
        <li class="tp_active" id="Js_hot"><a href="/vote/vote/list">人气排行</a></li>
        <li id="Js_random"><a href="/vote/vote/list">随便看看</a></li>
    </ul>
    <div class="tp_content">
        <div class="tp_search">
            <input type="text" placeholder="请输入选手姓名或编号" />
            <button id="J_search"><img src="/static/img/W12.png"/> 搜索</button>
        </div>
        <div class="tp_choose" id="J_list">
            <?php if(!empty($data['list'])){?>
            <section class="tp_popu tp_active" id="hot">
                <?php
                    foreach($data['list'] as $item){?>
                        <div class="tp_pic_1">
                            <h1 class="tp_pic_top" data-url="<?= $item['video']?>"><img style="margin-left 5%;margin-right:5%;width: auto;height: 150px" src="<?= $item['head']?>"/></h1>
                            <h3><?= $item['id']?> <?= mb_strlen($item['nick_name']) >3 ? mb_substr($item['nick_name'],0,3) . '...': $item['nick_name']?></h3>
                            <p><span><?= $item['vote_count']?></span>票</p>
                            <ul <?= $data['voted_id'] == $item['id'] ? 'class="tp_pic_btn"' : 'class="J-vote tp_pic_btn"'?>>
                                <?php if($data['voted_id'] == $item['id']){?>
                                    <li style="display: none"><aside class="tp_btn_on" id=<?= $item['id']?>><i>投票</i></aside></li>
                                    <li class="p_b_on" style="display: block;background: #666666"><aside  class="tp_btn_on"><i style="font-size: 18px;">已投</i></aside></li>
                                <?php } else{?>
                                    <li class="p_b_on"><aside class="tp_btn_on" id=<?= $item['id']?>><i>投票</i></aside></li>
                                    <li><aside><i>已投</i></aside></li>
                                <?php }?>
                            </ul>
                        </div>

                    <?php } ?>
            </section>
                    <?php }else{?>
                <img class="no-data" src="/static/img/W8.png"/>
            <?php }?>
            <div style="height: 10px"></div>
        </div>
    </div>


    <!--5 视频显示层-->
    <div id="video_modal" style="display:none;" class="J_showVideo">
        <div id="J_mask" class="mask1"></div>
        <div id="show_video">

            <video style="width:100%;" src="" controls="controls">
                您的浏览器不支持 video 标签。
            </video>

        </div>
    </div>

    <!--2 确认按钮-->
    <div id="conf_modal" class="shows" style="position:fixed;top: 100px;left:5%;width :90%;height :250px;">
        <div id="cof_mask" class="mask1"></div>
        <div id="pop_conf">
            <div class="p_conf_content">
                <div class="p_conf_text">
                    <p>是否确认为<span id="conf" selectId="">001 张三三</span>，这位明日网红之星投出一票？</p>
                </div>
                <ul id="p_conf_btn">
                    <li class="cancel"><a href="jasjavascript:void(0);">我再看看</a></li>
                    <li class="conf_on"><a href="javascript:void(0);">就TA了</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--3 投票成功层-->
    <div id="suc_modal" class="shows" style="position:fixed;top: 100px;left:10%;width :80%;height :250px;">
        <div id="tp_suc">
            <div class="tp_suc_content">
                <div class="tp_suc_pic"><img src="/static/img/W10.png"/></div>
                <div class="tp_suc_text">
                    <p>&nbsp;投票成功！感谢您的参与！</p>
                </div>
            </div>
        </div>
    </div>

    <!--4 限制投票层-->
    <div id="limit_modal" class="shows" style="position:fixed;top: 100px;left:10%;width :80%;height :250px;">
        <div id="tp_limit">
            <div class="tp_limit_content">
                <div class="tp_limit_text">
                    <p>不要贪心哦，每人每天仅可投一票，明天再来试试吧！</p>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="/static/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/script/commom.js"></script>
<script>



    $(function () {

        // 滑动选择
//        $('.tp_header').transformX();
        var _select = 'Js_hot', sort=0;
        //切换
        $(".tp_header li").on("click",function(){

            $(this).addClass("tp_active").siblings().removeClass("tp_active");
            _select = $(this).attr('id');
            if(_select == 'Js_hot'){
                sort=0;
            }else{
                sort=1;
            }
            $(".tp_choose section").eq($(this).index()).addClass("tp_active").siblings().removeClass("tp_active");
        })

        //搜索
        $('#J_search').on('touchend', function(e){
            var _val = $(this).parent().find('input').val();
            window.location.href = '/vote/vote/search?val='+_val;
        });

        //显示视屏层
        $('#J_list').on('touchend', 'h1', function(e){

            var _url =  $(this).attr('data-url');

            $('.J_showVideo').show().find('video').attr('src', _url);

            e.preventDefault();
        });
        //隐藏视屏层
        $('#J_mask').on('touchend', function(e){

            $(this).parent().hide().find('video').attr('src', '');

            e.preventDefault();
        });

        //点击投票事件
        $(document.body).on("touchend", '.J-vote li',function(e){
            $("#gzh_modal").addClass("shows");
            $("#conf_modal").removeClass("shows");
            $("#conf").html($(this).parent().parent().children('h3').html());
            $("#conf").attr("selectId",$(this).find('aside').attr('id'));
            $(window).on("scroll", function(){
                $(window).scrollTop(0);
            });
            e.preventDefault();
        })


        //点去就TA了事件
        $(".conf_on").on("click",function(){
            var userId = $("#conf").attr("selectId");
            $.post("<?= url::to('/vote/vote/vote')?>", {id:userId}, function(data) {
                if(data == 0) {
                    $("#"+userId).next().addClass("p_b_on");
                    $("#"+userId).next().css({"background":"#666666"});
                    $("#"+userId).removeClass("p_b_on");
                    $("#conf_modal").addClass("shows");
                    $("#suc_modal").show(300).delay(3000).hide(300);
                    $(window).off("scroll");
//                    location.reload();
                }else{
                    $("#conf_modal").addClass("shows");
                    $("#limit_modal").show(300).delay(3000).hide(300);
                    $(window).off("scroll");
//                    location.reload();
                }
            });
        })

        //点击再看看事件
        $(".cancel").on("touchstart",function(){
            $("#conf_modal").addClass("shows");
            $(window).off("scroll");
        })



    });




</script>

</body>
</html>
